import 'package:flutter/material.dart';

class CustomScrollViewTestRoute extends StatefulWidget {
  const CustomScrollViewTestRoute({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CustomScrollViewTestRouteState();
}

class _CustomScrollViewTestRouteState extends State<CustomScrollViewTestRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CustomScrollView'),
      ),
      body: Center(
        child: buildTwoSliverList(),
      ),
    );
  }

  Widget buildTwoSliverList() {
    // SliverFixedExtentList 是一个 Sliver，它可以生成高度相同的列表项。
    // 再次提醒，如果列表项高度相同，我们应该优先使用SliverFixedExtentList
    // 和 SliverPrototypeExtentList，如果不同，使用 SliverList.
    var listView = SliverFixedExtentList(
      delegate: SliverChildBuilderDelegate(
        (_, index) => ListTile(title: Text("$index")),
        childCount: 20,
      ),
      itemExtent: 56,
    );
    return CustomScrollView(
      slivers: [
        listView,
        listView,
      ],
    );
  }
}

class CustomScrollViewTestRoute2 extends StatefulWidget {
  const CustomScrollViewTestRoute2({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CustomScrollViewTestRouteState2();
}

class _CustomScrollViewTestRouteState2
    extends State<CustomScrollViewTestRoute2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // AppBar，包含一个导航栏.
          SliverAppBar(
            pinned: true, // 滑动到顶端时会固定住
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text("Demo"),
              background:
                  Image.asset("assets/images/01e6e1f2.jpg", fit: BoxFit.cover),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8),
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 2,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text("grid item $index"),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                //创建列表项
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('list item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}
